<template>
  <view>
    <view class="map_container">
      <map class="map" id="map" :longitude="longitude" :latitude="latitude" scale="14" show-location="true" :markers="markers" @markertap="makertap"></map>
    </view>
    <view class="map_text">
      <text class="h1">{{ textData.name }}</text>
      <text>{{ textData.desc }}</text>
    </view>
  </view>
</template>

<script>
import amapFile from '../../static/libs/amap-wx.130.js'; // 确保路径正确

export default {
  data() {
    return {
      longitude: 0,
      latitude: 0,
      markers: [],
      textData: {}
    };
  },
  mounted() {
    this.getInitMap();
  },
  methods: {
    getInitMap() {
      const that = this;
      const myAmapFun = new amapFile.AMapWX({ key: 'c6a1822cbb813a54b4039f0f981d608e' });
      myAmapFun.getPoiAround({
        iconPathSelected: '../../static/img/marker.png', //如：../img/marker_checked.png
        iconPath: '../../static/img/marker.png', //如：../img/marker.png
        success: function(data) {
          that.markers = data.markers;
          that.latitude = data.markers[0].latitude;
          that.longitude = data.markers[0].longitude;
          that.showMarkerInfo(data.markers, 0);
        },
        fail: function(info) {
          wx.showModal({ title: info.errMsg });
        }
      });
    },
    makertap(e) {
      const id = e.markerId;
      this.showMarkerInfo(this.markers, id);
      this.changeMarkerColor(this.markers, id);
    },
    showMarkerInfo(data, i) {
      this.textData = {
        name: data[i].name,
        desc: data[i].address
      };
    },
    changeMarkerColor(data, i) {
      const markers = data.map((marker, index) => {
        if (index === i) {
          marker.iconPath = '../../static/img/marker.png'; //如：../img/marker_checked.png
        } else {
          marker.iconPath = '../../static/img/marker.png'; //如：../img/marker.png
        }
        return marker;
      });
      this.markers = markers;
    }
  }
}
</script>

<style lang="scss">
.map_container {
  position: absolute;
  top: 0;
  bottom: 80px;
  left: 0;
  right: 0;
}
.map {
  width: 100%;
  height: 100%;
}
.map_text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  background: #fff;
  padding: 0 15px;
}
text {
  margin: 5px 0;
  display: block;
  font-size: 12px;
}
.h1 {
  margin: 15px 0;
  font-size: 15px;
}
</style>
